<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-02 10:38:20
 * @LastEditTime : 2021-09-06 10:00:31
 * @FilePath     : /newhope/src/page/awardInformation/index.vue
 * @Description  : 
-->
<script setup lang="ts">
import receiptOfSubcode from "/@/assets/images/receiptOfSubcode.png";
import determineButton from "/@/assets/images/determineButton.png";
import cannelButton from "/@/assets/images/cannelButton.png";
import { ref, toRaw } from "vue";
import { Mask } from "/@/components";
import { useStore } from "vuex";
import { State } from "/@/store/user";
import { useGo } from "/@/hooks/go";
import { useHttp } from "/@/hooks/http";
const store = useStore();
const [go] = useGo();
const [http] = useHttp();
const userInfo: { user: State } = store.state;
const userName = ref(userInfo.user.userInfo?.truename || "");
const phone = ref(userInfo.user.userInfo?.phone || "");
const addr = ref(userInfo.user.userInfo?.address || "");
// 取消
function cannel() {
	go({ name: "index" });
}
// 确定
async function determine() {
	// https://act.yoois.com/zt/qr2/api.php?i=3&logout=1&action=saveuserinfo
	// truename,phone,address
	const result = await http<{
		data: {};
		success: number;
		msg: string;
	}>({
		url: "?i=3&logout=1&action=saveuserinfo",
		method: "POST",
		data: {
			truename: userName.value,
			phone: phone.value,
			address: addr.value,
		},
	});
	if (result) {
		alert(result.data.msg);
		go({ name: "index" });
	} else {
		alert("网络好像开了一点小差");
	}
}
</script>
<template>
	<div class="awardInformation">
		<Mask />
		<div class="infoBox">
			<div class="box">
				<img :src="receiptOfSubcode" />
				<div class="form">
					<div>
						<span>姓名:</span>
						<input type="text" v-model="userName" placeholder="请输入姓名" />
					</div>
					<div>
						<span>电话:</span>
						<input type="text" v-model="phone" placeholder="请输入电话" />
					</div>
					<div>
						<span>收货地址:</span>
						<input type="text" v-model="addr" placeholder="请输入收款地址" />
					</div>
				</div>
			</div>
		</div>
		<div class="buttonOperation">
			<img :src="cannelButton" @click="cannel" alt="cannelButton button" class="cannelButton button" />
			<img
				:src="determineButton"
				@click="determine"
				alt="determineButton button"
				class="determineButton button"
			/>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.awardInformation {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url("../../assets/images/bkg/getInfoBkg.jpg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 104;
	.buttonOperation {
		position: absolute;
		bottom: 190px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 101;
		display: flex;
		.button {
			width: 124px;
			height: 42px;
		}
		.determineButton {
		}
		.cannelButton {
			margin-right: 24px;
		}
	}
	.infoBox {
		position: absolute;
		z-index: 101;
		bottom: 291px;
		left: 50%;
		transform: translateX(-50%);
		width: 317px;
		height: 203px;
		.box {
			position: relative;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				height: 100%;
				width: 100%;
			}
			.form {
				position: absolute;
				div {
					margin: {
						top: 16px;
					}
				}
				span {
					display: inline-block;
					font-size: 16px;
					font-weight: bold;
					font-stretch: normal;
					// line-height: 5px;
					letter-spacing: 0px;
					color: #bd010c;
					min-width: 100px;
					text-align: center;
				}
				input {
					width: 178px;
					height: 32px;
					background-color: #bd010b;
					border-radius: 5px;
					opacity: 0.53;
					overflow: none;
					border: none;
					color: black;
					font-weight: bold;
					padding: {
						left: 10px;
					}
				}
			}
		}
	}
}
</style>
